<template>
  <div class="seedAdd">
    <el-form
      :model="seedForm"
      ref="seedForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="种类" prop="seedType">
        <el-select v-model="seedForm.seedType" class="input" placeholder="请选择">
          <el-option
            v-for="item in sysSeedList"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品种">
        <el-input v-model="seedForm.seedInfo" class="input" placeholder="请输入品种"></el-input>
      </el-form-item>
      <el-form-item label="种植标准" prop="plantingStandards">
        <div class="seedStandard">
          <ul>
            <li
              :class="{ active: item.active }"
              v-for="item in seedStandard"
              :key="item.id"
              @click="selectStandard(item.id)"
            >
              <img :src="item.icon" alt="" />
              <div>{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </el-form-item>
      <el-form-item label="种植方式" prop="plantingPatterns">
        <el-radio-group v-model="seedForm.plantingPatterns">
          <el-radio :label="0">直播</el-radio>
          <el-radio :label="1" >移栽</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="作业方式" prop="seedWay">
        <el-radio-group v-model="seedForm.seedWay">
          <el-radio :label="0">人工</el-radio>
          <el-radio :label="1">机械</el-radio>
        </el-radio-group>
      </el-form-item>
            <el-form-item label="操作人" prop="participants">
        <el-select v-model="seedForm.participants" class="input" @change="onSelectChange" placeholder="请选择操作人">
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.name"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="seedForm.plantingPatterns===1? '移栽时间':'直播时间' "  prop="time">
        <el-date-picker
        class="input"
          v-model="seedForm.time"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="预计亩产" prop="desc">
        <el-input v-model="seedForm.desc">
          <template slot="append">公斤/亩</template>
        </el-input>
      </el-form-item> -->
      <div class="more" @click="more = !more" v-if="!more">更多设置...</div>
      <el-form-item label="种子数量" v-if="more">
        <el-input v-model="seedForm.num" placeholder="种子数量"></el-input>
      </el-form-item>
      <el-form-item label="植株间距" v-if="more">
        <el-input v-model="seedForm.spacing" placeholder="请输入植株间距"><template slot="append">cm</template></el-input>
      </el-form-item>
      <el-form-item class="submitItem">
        <el-button type="primary" class="submitBtn" @click="submitForm('seedForm')"
          >立即创建</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import lvse from '@/assets/img/lvse.png'
import youji from '@/assets/img/youji.png'
import putong from '@/assets/img/putong.png'
import { AddSeedingApi } from '@/api/mission'

export default {
  name: 'SevencolorUserFarmStockDialog',
  props: {
    sysSeedList: {
      type: Array
    },
    userList: {
      type: Array
    },
    landDetail: {
      type: Object
    }
  },

  data () {
    return {
      seedForm: {
        baseId: 1,
        landId: null,
        plantingStandards: null,
        plantingPatterns: 0,
        seedWay: 0
      },
      seedStandard: [
        // {
        //   id: 1,
        //   name: '绿色',
        //   active: false,
        //   icon: lvse
        // },
        {
          id: 1,
          name: '有机',
          active: false,
          icon: youji
        },
        {
          id: 0,
          name: '普通',
          active: false,
          icon: putong
        }
      ],
      more: false,
      rules: {
        seedType: [
          { required: true, message: '请选择种类', trigger: 'change' }
        ],
        plantingStandards: [
          { required: true, message: '请选择种植标准', trigger: 'change' }
        ],
        plantingPatterns: [
          { required: true, message: '请选择种植方式', trigger: 'change' }
        ],
        seedWay: [
          { required: true, message: '请选择作业方式', trigger: 'change' }
        ],
        participants: [
          { required: true, message: '请选择操作人', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      // ... 根据需要添加其他字段的校验规则
      }
    }
  },

  mounted () {
    this.seedForm.landId = this.landDetail.landId
  },

  methods: {
    selectStandard (id) {
      // console.log(id)
      const active = this.seedStandard.find((item) => item.id === id)
      this.seedForm.plantingStandards = id
      active.active = true
      this.seedStandard.forEach((item) => {
        if (item.id !== id) {
          item.active = false
        }
      })
      console.log(this.seedForm)
    },
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.seedForm.num = +this.seedForm.num
          const res = await AddSeedingApi(this.seedForm)
          console.log(res)
          this.$router.go({ path: this.$route.path })
        } else {
          alert('表单校验失败！')
          return false
        }
      })
    },
    // 操作人下拉事件
    onSelectChange (value) {
      const userInfo = this.userList.filter((item) => item.userName === value)
      // console.log(userInfo)
      this.seedForm.participantsId = userInfo[0].userId
    }
  }

}
</script>
<style lang="scss" scoped>
.seedStandard {
  ul {
    display: flex;
    li {
      width: 4.2708vw;
      height: 4.2708vw;
      list-style-type: none;
      text-align: center;
      margin-right: 1.5208vw;
      padding: 0.2604vw 0;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
  }
}
.active {
  border: 1px solid #64c3a4 !important;
  background: url("../../../assets/img/selected-ico.png") no-repeat right 3.7vw;
}
.seedAdd {
  height: 30vw;
  width: 32vw;
  padding: 0 2vw;
  overflow-y: auto;
}
.input {
  width: 20vw;
}
.more {
   margin: 1vw 0;
   text-align: center;
}
.submitBtn {
  width: 5vw;
  margin: 0 6vw;
}
</style>
